<!--<template>-->
  <!--<div class="WxShoppingcar-Page">-->
    <!--<table class="user5" width="100%" v-for="item in items">-->
      <!--<tr>-->
        <!--<td colspan="5" style="line-height: 35px;border-bottom: solid 1px steelblue">&nbsp; {{item.name}} 旗舰店 > <el-button type="text" @click="open2" style="float: right;margin-right: 5px">删除</el-button>-->
        <!--</td>-->
      <!--</tr>-->
      <!--<tr>-->
        <!--<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">-->
            <!--<el-checkbox :label="item" :key="item">-->
              <!--<td rowspan="2"><img :src="item.img" style="margin-top: 1px; width: 70px;height: 70px;"></td>-->
              <!--<td colspan="3">商品信息：{{item.name}}￥:{{item.jiage}}</td>-->
              <!--<br>-->
              <!--<td style="padding-left: 30%"><div class="el-icon-minus" @click="jian(item.shops_id)" style="color:black"></div>-->
                <!--<input type="text" :value="item.shuliang">-->
                <!--<div class="el-icon-plus" @click="add(item.shops_id)" style="color:black"></div>-->
              <!--</td>-->
            <!--</el-checkbox>-->
        <!--</el-checkbox-group>-->
        <!--</tr>-->
    <!--</table>-->
    <!--&lt;!&ndash;<table class="user5" width="100%" v-for="item in data4">&ndash;&gt;-->
      <!--&lt;!&ndash;<tr>&ndash;&gt;-->
        <!--&lt;!&ndash;<td colspan="5" style="line-height: 35px;border-bottom: solid 1px steelblue">&nbsp; {{item.shopname}} 旗舰店 > <el-button type="text" @click="open2" style="float: right;margin-right: 5px">删除</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;</td>&ndash;&gt;-->
      <!--&lt;!&ndash;</tr>&ndash;&gt;-->
      <!--&lt;!&ndash;<tr>&ndash;&gt;-->
        <!--&lt;!&ndash;<td rowspan="2">&ndash;&gt;-->
          <!--&lt;!&ndash;<input id="ipt1" :value="item.price" type="checkbox" style="width:20px;height: 20px" @click="inp1()"/>&ndash;&gt;-->
        <!--&lt;!&ndash;</td>&ndash;&gt;-->
        <!--&lt;!&ndash;<td rowspan="2"><img :src="item.picture" alt="" style="margin-top: 1px; width: 70px;height: 70px;"></td>&ndash;&gt;-->
        <!--&lt;!&ndash;<td colspan="3">商品信息：{{item.shopname}}</td>&ndash;&gt;-->
      <!--&lt;!&ndash;</tr>&ndash;&gt;-->
      <!--&lt;!&ndash;<tr>&ndash;&gt;-->
        <!--&lt;!&ndash;<td colspan="2" width="30%">￥:{{item.price}} </td>&ndash;&gt;-->
        <!--&lt;!&ndash;<td>&nbsp; <a href="" style="color: black"><div class="el-icon-minus"></div></a>&nbsp; <input type="text" value="1">&nbsp; <a href="" style="color: black"><div class="el-icon-plus"></div></a></td>&ndash;&gt;-->
      <!--&lt;!&ndash;</tr>&ndash;&gt;-->
    <!--&lt;!&ndash;</table>&ndash;&gt;-->
    <!--<div style="clear: both"></div>-->
    <!--<footer id="footer">-->
      <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选<span class="e3">合计: ￥{{jiage}}</span></el-checkbox>-->
      <!--<div class="e2">&nbsp; 结算()</div>-->
    <!--</footer>-->
  <!--</div>-->
<!--</template>-->

<!--<script>-->
<!--//  var inp = document.getElementById("inp");-->
<!--//  console.log(inp.value);-->
  <!--import ElCheckboxGroup from "../../../node_modules/element-ui/packages/checkbox/src/checkbox-group.vue";-->
<!--const cityOptions = [''];-->
<!--export default {-->
  <!--components: {ElCheckboxGroup},-->
  <!--name: 'WxShoppingcar',-->
    <!--data() {-->
      <!--return {-->
        <!--activeName: 'first',-->
        <!--num1: 1,-->
        <!--items:[],-->
        <!--jiage:'',-->
        <!--data4:[],-->
        <!--checkAll: true,-->
        <!--checkedCities: [],-->
        <!--cities: cityOptions,-->
        <!--isIndeterminate: true,-->

      <!--}-->
    <!--},-->
    <!--mounted() {-->
      <!--this.$http.get('/gouwuche').then(resp=>{-->
        <!--console.log(resp.data[1]);-->
        <!--this.jiage = resp.data[1];-->
        <!--this.items = resp.data[0];-->
        <!--this.data4 = resp.data[2];-->
<!--//            for(let sp of resp.data[1]){-->
<!--//               this.shops = sp.picture;-->
<!--//            }-->
      <!--}).catch(err=>console.log(err));-->
    <!--},-->
    <!--methods: {-->
      <!--handleChange(value) {-->
        <!--console.log(value);-->
      <!--},-->
      <!--handleCheckAllChange(event) {-->
        <!--this.checkedCities = event.target.checked ? this.items: [];-->
        <!--this.isIndeterminate = false;-->
      <!--},-->
      <!--handleCheckedCitiesChange(value) {-->
        <!--let checkedCount = value.length;-->
        <!--this.checkAll = checkedCount === this.items.length;-->
        <!--this.isIndeterminate = checkedCount > 0 && checkedCount < this.items.length;-->
      <!--},-->
      <!--//加数量-->
      <!--add(id){-->
        <!--this.$http.post('/add',{id:id})-->
          <!--.then(resp=>{-->
            <!--let data=resp.data;-->
            <!--if(data.status){-->
              <!--location.reload('/wxshopping')-->
            <!--}else{-->
              <!--this.$message({-->
                <!--type: 'error',-->
                <!--message: data.error,-->
              <!--});-->
            <!--}-->
          <!--})-->
      <!--},-->

<!--//      jiesuan(){-->
<!--//         var obj = document.getElementById("ipt");-->
<!--//        var  check_val = [];-->
<!--//        var k = 0;-->
<!--//        for(k in obj){-->
<!--//          if(obj[k].checked)-->
<!--//            check_val.push(obj[k].value);-->
<!--//        }-->
<!--//        alert(check_val);-->
<!--//      },-->
<!--//      inp(){-->
<!--//        let inp = document.getElementsById("ipt");-->
<!--//        console.log(inp[1].value);-->
<!--//        var inpt = [];-->
<!--//        let inp = document.getElementsByName("inpt");-->
<!--//        var a = inp.value;-->
<!--//        console.log(inp[1].value);-->
<!--//       for (var i = 0;i<inp.length;i++){-->
<!--//         var a = inp[i].value;-->
<!--//         console.log(a);-->
<!--//       }-->
<!--//      },-->
      <!--open2() {-->
        <!--this.$confirm('确定不要我了吗o(>﹏<)o?', '提示', {-->
          <!--confirmButtonText: '确定',-->
          <!--cancelButtonText: '取消',-->
          <!--type: 'warning'-->
        <!--}).then(() => {-->
          <!--this.$message({-->
            <!--type: 'success',-->
            <!--message: '删除成功!'-->
          <!--});-->
        <!--}).catch(() => {-->
          <!--this.$message({-->
            <!--type: 'info',-->
            <!--message: '已取消删除'-->
          <!--});-->
        <!--});-->
      <!--}-->
    <!--},-->
  <!--};-->
<!--</script>-->
<!--<style lang="less">-->
  <!--.WxCommodity-Page {-->
    <!--min-width: 320px;max-width:640px ;-->
    <!--height: 100%;margin: auto;-->
  <!--}-->
  <!--.e2{  width: 80px;float: right;background:linear-gradient(orange,burlywood);  }-->
  <!--.e3{  margin-left: 45%;  }-->
  <!--#bj{  float: right;margin-right: 10px;  }-->
  <!--#header{-->
    <!--z-index: 1000;-->
    <!--position: fixed;-->
    <!--left: 0;top: 0;-->
    <!--height: 50px;-->
    <!--width:100%;-->
    <!--font-size: 12px;-->
    <!--background-color: olivedrab;-->
    <!--line-height: 50px;-->
    <!--color: aliceblue;-->
  <!--}-->
  <!--#footer{-->
    <!--z-index: 50;-->
    <!--bottom: 50px;-->
    <!--position: fixed;-->
    <!--left: 0;width: 99.5%;-->
    <!--height: 50px;-->
    <!--font-size: 12px;-->
    <!--background-color: white;-->
    <!--line-height: 50px;-->
    <!--color: aliceblue;-->
  <!--}-->
  <!--.user5{  color: black;width: 100%;margin-top: 2px;background-color: white;  }-->
  <!--.el-tabs{  background-color: gainsboro;  }-->
  <!--.dfk{  line-height: 20px; height: 20px;color: black;background-color: seashell;-->
  <!--}-->
  <!--h6{-->
    <!--margin-left: 15px;margin-top: 0px;padding-top: 5px;color: royalblue;-->
  <!--}-->
  <!--.el-message-box{-->
    <!--width: 100%;-->
  <!--}-->
  <!--input{-->
    <!--width: 30%;-->
  <!--}-->
<!--</style>-->

<template>
  <div class="WxShoppingcar-Page">
    <table class="user5" width="100%" v-for="item in items">
      <tr>
        <td colspan="5" style="line-height: 35px;border-bottom: solid 1px steelblue">&nbsp; {{item.name}} 旗舰店 > <el-button type="text" @click="open2" style="float: right;margin-right: 5px">删除</el-button>
        </td>
      </tr>
      <el-checkbox-group v-model="checkeditems" @change="handleCheckedCitiesChange">
        <el-checkbox  :label="item" :key="item.name">
          <tr>
            <td rowspan="2"><img :src="item.img" alt="" style="margin-top: 1px; width: 70px;height: 70px;"></td>
            <td colspan="3">{{item.name}}</td>
          </tr>
          <tr style="">
            <td colspan="2" >￥:{{item.jiage}} </td>
            {{shuliang}}
            <!--<td>&nbsp; <a href="" style="color: black"><div class="el-icon-minus"></div></a>&nbsp; <input type="text" value="1">&nbsp; <a href="" style="color: black"><div class="el-icon-plus"></div></a></td>-->
          </tr>
        </el-checkbox>
        <div style="float: right;margin-top:40px"><el-input-number size="small" v-model="item.Number" @change="handleChange" :min="1"  style="width:95px"></el-input-number></div>
      </el-checkbox-group>

    </table>
    <div style="clear: both;height: 100px"></div>
    <footer id="footer">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选<span class="e3">合计: ￥{{jiage}}</span></el-checkbox>
      <div class="e2">&nbsp; 结算{{zong}}</div>
    </footer>
  </div>
</template>
<script>
//  const  items = ['',''];
  export default {
    name: 'WxShoppingcar',
    data() {
      return {
        checkAll: true,
        checkeditems: [],
        isIndeterminate: true,
        items:[],
        activeName: 'first',
        jiage:'',
        zong:[],
        shuliang:''
      }
    },
    mounted() {
      this.$http.get('/gouwuche').then(resp=>{
        console.log(resp.data[1]);
        this.jiage = resp.data[1];
        this.items = resp.data[0];
//            for(let sp of resp.data[0]){
//               this.shops = sp.picture;
//            }
      }).catch(err=>console.log(err));
    },
    methods: {
      handleChange(value) {
//        console.log(this.items.jiage);
//        var shuliang = value;
//       console.log(shuliang)
        this.shuliang = value
        console.log(value)

      },
      handleCheckAllChange(event) {
        this.checkeditems = event.target.checked ? this.items: [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.items.length;
        let jiage = this.items;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.items.length;
        var arr = [];
//        console.log(shuliang)
        for (var i = 0;i<value.length;i++){
          arr.push(value[i].jiage*value[i].shuliang);
        }
//        console.log(arr);
        var danjia = 0;
        for (var j=0;j<arr.length;j++){
          danjia += parseInt(arr[j])
        }
        console.log(danjia);
//        console.log(value)

//       this.zong = value.jiage;
      },
      open2() {
        this.$confirm('确定不要我了吗o(>﹏<)o?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
  };
</script>
<style lang="less">
  .WxCommodity-Page {
    min-width: 320px;max-width:1024px ;
    height: 100%;margin: auto;
  }
  .e2{  width: 80px;float: right;background:linear-gradient(orange,burlywood);  }
  .e3{  margin-left: 45%;  }
  #footer{
    z-index: 50;
    bottom: 50px;
    position: fixed;
    left: 0;width: 99.5%;
    height: 50px;
    font-size: 12px;
    background-color: white;
    line-height: 50px;
    color: aliceblue;
  }
  .user5{  color: black;width: 100%;margin-top: 2px;background-color: white;  }
</style>
